<template>
    <view class="listContainer">
        <uni-card v-if="list.length > 0" v-for="(item, index) in list" :key="index" padding="0" spacing="0">
            <template slot="cover">
                <view class="relative">
                   <image class="w-full h-40" :src="item.carousel[0] ? item.carousel[0] : imgUrl" mode="aspectFill">
                    </image>
					<!-- <video class="w-full h-40" :src="item.carousel[0] ? item.carousel[0] : ''" >
					</video> -->
                    <view class="absolute bottom-10 left-0 w-full uni-pa-1">
                        <text class="uni-black card_title">{{ item.note ? item.note.title : item.title }}</text>
                    </view>
                </view>
            </template>
            <view slot="actions" class="flex justify-between uni-pa-4 " style="margin-top: 40px;">
                <view class="flex items-center">
                    <image class="w-5 h-5 rounded-full uni-mr-2 bg-gray-200" :src="item.user.avatar" mode="aspectFill">
                    </image>
                    <text>{{ item.user.name }}</text>
                    <text class="uni-px-4 text-gray-500">{{ userId == (item.user.userId || item.user.id) ? '(我)' : ''
                    }}</text>
                </view>
                <view class="flex items-center text-gray-500">
                    <uni-icons type="eye-filled" size="18" color="#999"></uni-icons>
                    <text>{{ item.note ? item.note.browse : item.browse }}</text>
                </view>
            </view>
            <!-- 遮罩层绑定点击事件 原因：image -->
            <view class="absolute top-0 left-0 w-full h-full"
                @click="goto(item.note ? `/pages/note/index?id=${item.note.id}` : `/pages/note/index?id=${item.id}`)">
            </view>
        </uni-card>
    </view>
</template>

<script>
export default {
    props: {
        list: { type: Array, required: true },
        userId: ''
    },
    data() {
        return {
            imgUrl: '../../static/img/bg-2.jpg',
        }
    },
    methods: {
        goto(url) {
            uni.navigateTo({
                url,
            })
        },
    }
}
</script>

<style lang="scss" scoped>
	.listContainer{
		 // display: flex;
		 // flex-wrap: wrap;
		 // justify-content: space-between;
		.uni-card{
			 display: inline-block;
			 width:calc((100% - 16px)/2);
			 margin: 3px !important;
		}
		.card_title{
			  display: -webkit-box;
			  -webkit-box-orient: vertical;
			  -webkit-line-clamp: 2;
			  overflow: hidden;
			  text-overflow: ellipsis;
		}
	}
</style>